<script setup>
import { ref, computed, onMounted } from 'vue';
import { getAllPatientsService, deletePatientService } from '@/api/admin.js';
import { ElMessage, ElMessageBox } from 'element-plus';

// 定义患者列表数据
const patients = ref([]);
const currentPage = ref(1);
const pageSize = ref(12);
const totalPatients = ref(0);
const searchQuery = ref(''); // 搜索输入框的绑定值

// 获取所有患者信息的函数
const fetchPatients = async () => {
  try {
    const response = await getAllPatientsService();
    if (response.code === 0) {
      patients.value = response.data;
      totalPatients.value = response.data.length;
    } else {
      ElMessage.error(response.message || '获取患者信息失败');
    }
  } catch (error) {
    ElMessage.error('获取患者信息失败');
  }
};

// 计算过滤后的患者列表
const filteredPatients = computed(() => {
  if (!searchQuery.value) {
    return patients.value;
  }
  return patients.value.filter(patient =>
    patient.username.toLowerCase().includes(searchQuery.value.toLowerCase())
  );
});

// 删除患者信息的函数
const deletePatient = async (id) => {
  try {
    await ElMessageBox.confirm('确定要删除该患者吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    });
    const response = await deletePatientService(id);
    if (response.code === 0) {
      ElMessage.success('删除成功');
      fetchPatients(); // 重新获取患者列表
    } else {
      ElMessage.error(response.message || '删除失败');
    }
  } catch (error) {
    ElMessage.error('删除失败');
  }
};

// 格式化身份证号码
const formatIdCard = (idCard) => {
  if (!idCard) return '';
  return idCard.replace(/^(.{3})(?:\d+)(.{4})$/, '$1****$2');
};

// 在组件挂载时获取数据
onMounted(() => {
  fetchPatients();
});
</script>

<template>
  <div>
    <el-input
      v-model="searchQuery"
      placeholder="搜索用户名"
      style="margin-bottom: 20px; width: 300px;"
    />
    <el-table :data="filteredPatients.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%">
      <el-table-column label="序号" width="100">
        <template #default="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" width="150"></el-table-column>
      <el-table-column prop="gender" label="性别" width="150"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
      <el-table-column prop="phoneNumber" label="电话" width="150"></el-table-column>
      <el-table-column prop="idCard" label="身份证号" width="150">
        <template #default="scope">
          {{ formatIdCard(scope.row.idCard) }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="mini" type="danger" @click="deletePatient(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:currentPage="currentPage"
      :page-size="pageSize"
      :total="filteredPatients.length"
      layout="total, prev, pager, next, jumper"
      style="margin-top: 20px; text-align: right;"
    />
  </div>
</template>

<style scoped>
/* 添加样式 */
</style>

